<template>
  <div class="left-column">
    <div class="column-card">
      <div class="card-header">
        <i class="fa-solid fa-cart-shopping" aria-hidden="true"/>
        <h3>近期学生充值</h3>
        <div class="view-switcher">
          <el-button
            size="mini"
            :class="{ 'active': true }"
          >
            近三天
          </el-button>
          <span class="badge">{{ rechargeData.length }}</span>
        </div>
      </div>

      <div class="calendar-content">
        <ul v-if="showData&&showData.length > 0" class="schedule-list">
          <li v-for="(item,index) in showData" :key="index" class="schedule-item">
            <span class="time">{{ item.rechargeTime }}</span>
            <span class="content">{{ item.studentName }}<span class="platform-wait">续费
              {{ Number(item.rechargeHours) % 1 === 0 ? parseInt(item.rechargeHours) : Number(item.rechargeHours) }}
              课时</span></span>
          </li>
        </ul>
        <div v-else class="no-data-div">
          <p>暂无数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'LeftColumn',
  props: {
    rechargeData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showData: [], // 当前展示的三条
      currentIndex: 0, // 当前轮播起点
      timer: null // 定时器引用
    }
  },
  watch: {
    rechargeData() {
      this.updateShowData()
    }
  },
  mounted() {
    // 初始化展示
    this.updateShowData()

    // 每5秒更新一次
    this.timer = setInterval(this.updateShowData, 5000)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    updateShowData() {
      if (this.rechargeData.length === 0) return

      // 取出 3 条数据（循环展示）
      const start = this.currentIndex
      const end = start + 3
      const total = this.rechargeData.length

      if (end <= total) {
        // 直接取连续3条
        this.showData = this.rechargeData.slice(start, end)
      } else {
        // 若到末尾不够3条，则从头补齐
        this.showData = [
          ...this.rechargeData.slice(start, total),
          ...this.rechargeData.slice(0, end - total)
        ]
      }
      // showData 去重
      this.showData = this.showData.filter((item, index, self) => {
        // 查找当前元素在数组中第一次出现的索引
        const firstIndex = self.findIndex(
          el => el.rechargeHours === item.rechargeHours &&
            el.studentName === item.studentName &&
            el.rechargeTime === item.rechargeTime
        )
        // 只保留第一次出现的元素（索引与当前索引一致）
        return firstIndex === index
      })

      // 更新下一次的起点
      this.currentIndex = (this.currentIndex + 3) % total
    }
  }
}
</script>

<style scoped>
.left-column {
  box-sizing: border-box;
}

.column-card {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(8, 8, 8, 0.15);
  padding: 15px 20px;
  background-color: #fff;
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.no-data-div p {
  display: flex;
  justify-content: center;
  color: #999;
  font-size: 16px;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  color: #333;
}

.card-header h3 i {
  margin-right: 8px;
  color: #0084ff;
}

/* 视图切换器 */
.view-switcher {
  display: flex;
  gap: 8px;
}

.view-switcher .el-button {
  padding: 4px 10px;
  border-radius: 12px;
  background-color: #f8f9fa;
  border: none;
  color: #666;
}

.view-switcher .el-button.active {
  background-color: #0084ff;
  color: #fff;
}

/* 日程列表样式 */
.schedule-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.schedule-item {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px dashed #f0f0f0;
  align-items: center;
}

.schedule-item:last-child {
  border-bottom: none;
}

.time {
  width: 130px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.content {
  flex: 1;
  font-size: 14px;
  color: #555;
}

.platform {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #e8f4ff;
  color: #0084ff;
  font-size: 12px;
}

.platform-wait {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #7bc47f;
  color: #ffffff;
  font-size: 12px;
}

.platform-end {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #ff4d4f;
  color: #ffffff;
  font-size: 12px;
}

/* 待处理数量徽章 */
.badge {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .left-column {
    width: 100%;
  }
}

.action-btn {
  display: flex;
  align-items: center;
  padding: 5px 20px;
  border-radius: 8px;
  background-color: #f8f9fa;
  color: #333;
  border: none;
  transition: all 0.2s;
}

.action-btn:hover {
  background-color: #e9ecef;
  color: #0084ff;
}

.action-btn i {
  margin-right: 8px;
  font-size: 12px;
}

.action-btn span {
  font-size: 12px;
}
</style>
